<template>
    <div class="wrapper">
        <Tag color="blue" type="border" size="small">音频识别</Tag>

        <Row>
            <Col span="24">
                <Upload
                    :before-upload="handleUpload"
                    action="">
                    <Button icon="ios-cloud-upload-outline">选择音频文件并上传</Button>
                </Upload>
                <div v-if="file !== null">待转文本音频: {{ file.name }} 
                    <Button type="warning" @click="audioToText" :loading="loadingStatus">
                        {{ loadingStatus ? '加载中~~~' : '点击开始音频转文本' }}
                    </Button>
                </div>
            </Col>
        </Row>
        <br>
        <Row>
            <Col span="24">
                <div>
                    <Input  v-model="textResult" placeholder="等待转文本" type="textarea" />
                </div>
            </Col>
        </Row>

    </div>
</template>


<script>
import IdentityApi  from  '@/api/IdentityApi.js'  // 引入全局 js
import cryptoJs from 'crypto-js'

export default {
    data() {
        return {
            file: null,
            base64Data: '',
            len: 0,
            loadingStatus: false,
            clientConfig: {
                credential: {
                    secretId: "SecretId",
                    secretKey: "SecretKey",
                },
                region: "",
                profile: {
                    httpProfile: {
                    endpoint: "asr.tencentcloudapi.com",
                    },
                },
            },
            textResult: '',
        }
    },

    methods:{
        // 音频转文本
        audioToText() {
            this.loadingStatus = true;
            IdentityApi.getIdentityRes(this.taskId).then(resp => {
                console.log('resp :>> ', resp);
                if(resp.data.code == 200){
                    let data = JSON.parse(resp.data.data) 
                    if(data.Data.StatusStr === 'success'){
                        this.textResult = data.Data.Result
                        this.$Notice.success({
                            title: '音频转文本成功',
                            desc:  this.textResult,
                        });
                    }else{
                        timer = setTimeout(() => {
                            this.audioToText()
                        }, 1000)
                    }
                }
                this.loadingStatus = false;
            }).catch(err => {
                console.log('err :>> ', err);
                this.loadingStatus = false;
            }) 
        },

        handleUpload(file) {
            this.file = file
            // 播放试听 异步
            let dataUrl = window.URL.createObjectURL(this.file);
            let audio = new Audio(dataUrl)
            audio.play()
            this.loadingStatus = true;
            /*---------------------------------------------------------------------------------------------*/
            // base64 加密
            let reader = new FileReader()
            reader.readAsDataURL(this.file)   //将读取的文件转换成base64格式
            this.len = this.file.size

            const that = this;
            reader.onload = function(e) {
                // console.log("base64文件", e.target.result)
                console.log("原始文件长度", that.len)
                // 准备调用后端接口(获取到一个task Id)
                IdentityApi.identity(e.target.result, that.len).then(resp => {
                    console.log('resp :>> ', resp);
                    if(resp.data.code == 200){
                        let data = JSON.parse(resp.data.data)
                        that.taskId = data.Data.TaskId
                        console.log('data :>> ', data);
                    }
                    that.loadingStatus = false;
                }).catch(err => {
                    console.log('err :>> ', err);
                    that.loadingStatus = false;
                })
            }
            return false;
        },

    }
}
</script>   


<style scoped>
.wrapper{
    padding: 50px;
}
</style>